<script>
import commlogin from "@/util/wxlogin";
export default {
  data(){
    return{
      list:[{
        name: '',
        checked: false,
      }],
	  code: ''
    }
  },
  onLoad() {
	  // #ifdef MP-WEIXIN
		  this.initCode()
	  // #endif
  },
  methods:{
	// #ifdef MP-WEIXIN
	initCode(){
		let that = this
		  uni.login({
			provider: 'weixin',
			success: function (loginRes) {
			  that.code = loginRes.code
			}
		  })
	},
	// #endif
    onGetPhoneNumber(e) {
      if(!this.list[0].checked){
        uni.showToast({
          icon:'none',
          title:'请先同意用户服务协议和隐私政策'
        })
		this.initCode()
        return
      }
      let that = this
      commlogin.getCode(e.detail.iv, e.detail.encryptedData, that.code)
          .then(res=>{
            this.showgetMobile = false
            uni.showToast({
              title:'登录成功',
              icon:'none',
            })
            setTimeout(()=>{
              uni.navigateBack()
            },1500)
          })
          .catch((error)=>{
			  this.initCode()
		  })
    },
	test() {
		if(!this.list[0].checked){
		  uni.showToast({
		    icon:'none',
		    title:'请先同意用户服务协议和隐私政策'
		  })
		  return;
		}
	},
    toMobile(){
      this.$Router.push({
        path:'/pages/public/mobileLogin'
      })
    },
    checkboxChange(e){},
    toWeb(e){
      this.$Router.push({
        path: '/pages/public/webview',
        query: {
          webviewPath: e == 1 ? 'https://www.hzwltb69.com/article/detail/14_0' : 'https://www.hzwltb69.com/article/detail/40_0'
        }
      })
    }
  }
}
</script>
<template>
  <view class="content">
    <ljshop-back class="back"></ljshop-back>	
    <view class="big-box">
      <view class="img-box">
        <image class="ljshop-image"
               src="https://image.hzwltb69.com/app/date/2023/图片 1767.png"
               mode="widthFix"
        ></image>
      </view>
      <view class="title-box">
        登录可享受更好的购物体验
      </view>
      <view class="tip-box">
        <view class="sub-box">
          <span>
            ①
          </span>
          提供符合您口味的商品推荐
        </view>
        <view class="sub-box">
          <span>
            ②
          </span>
          轻松订单管理，随时修改订单信息
        </view>
        <view class="sub-box">
          <span>
            ③
          </span>
          积分优惠，享受独家优惠和促销活动
        </view>
      </view>
      <view class="btn-box">
        <view class="btn"
        @tap="toMobile"
        >验证码登录</view>
<!--        <view class="btntwo"></view>-->
		<!-- #ifdef MP-WEIXIN -->
		<view class="btntwo"
			@tap="test"
			v-show="list[0].checked == false"
		>
			手机一键登录
		</view>
		<button
		    class="btntwo"
		    open-type="getPhoneNumber"
		    @getphonenumber="onGetPhoneNumber"
			v-show="list[0].checked == true"
		>
    手机一键登录
		</button>
		<!-- #endif -->
      </view>
      <view style="display: flex;align-items: center;margin-top: 100rpx">
        <u-checkbox-group>
          <u-checkbox
			  activeColor="#922d23"
              shape="circle"
              @change="checkboxChange"
              v-model="item.checked"
              v-for="(item, index) in list" :key="index"
          ></u-checkbox>
        </u-checkbox-group>
        <span class="tip">
        同意
          <span @click="toWeb(1)" style="color: #922d23">用户服务协议</span>
          和
          <span @click="toWeb(2)" style="color: #922d23">隐私政策条件</span>
        </span>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.content{
  display: flex;
  height: 100vh;
  flex-direction: column;
  //justify-content: center;
  padding-top: 300rpx;
  align-items: center;
  .big-box{
    width: 552rpx;
    height: 1000rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img-box{
      width: 157rpx;
      height: 157rpx;
      border-radius: 35rpx;
      overflow: hidden;
    }
    .title-box{
      width: 452rpx;
      height: 54rpx;
      color: rgba(33, 33, 33, 1);
      font-size: 36rpx;
      line-height: 150%;
      text-align: center;
      font-weight: bold;
      margin-top: 100rpx;
      margin-bottom: 50rpx;
    }
    .sub-box{
      font-size: 28rpx;
      color: rgba(80, 80, 80, 1);
      margin-bottom: 15rpx;
      span{
        margin-right: 10rpx;
      }
    }
    .btn-box{
      width: 552rpx;
      height: 88rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 80rpx;
      .btn{
        height: 70rpx;
        line-height: 70rpx;
        width: 264rpx;
        color: rgba(80, 80, 80, 1);
        background-color: rgba(255, 255, 255, 1);
        border: 1rpx solid #ccc;
        border-radius: 32rpx;
        font-size: 28rpx;
        text-align: center;
        flex: 1;
      }
      .btntwo{
        height: 70rpx;
        line-height: 70rpx;
        width: 264rpx;
        color: #fff;
        background-color: #922d23;
        border-radius: 32rpx;
        font-size: 28rpx;
        text-align: center;
        margin-left: 10rpx;
      }
    }
    .tip{
      color:rgba(121, 121, 121, 1);
      font-size: 28rpx;
    }
  }
}
::v-deep .u-checkbox{
  display: block !important;
  margin-right: 10rpx;
}
.back{
  position: fixed;
  top: 0;
  left: 0;
}
</style>